<template>
    <div v-if="!showVideo" >
        <el-menu mode="horizontal" style="border: none;" @select="(e)=>{videoListParm.type=e; tryGetVideoList()}">
            <el-menu-item index="">全部</el-menu-item>
            <el-menu-item index="游戏">游戏</el-menu-item>
            <el-menu-item index="二次元">二次元</el-menu-item>
            <el-menu-item index="音乐">音乐</el-menu-item>
            <el-menu-item index="美食">美食</el-menu-item>
            <el-menu-item index="知识">知识</el-menu-item>
        </el-menu>

        <div class="videoList" v-loading="isLoading">
            <div  v-for="video in videoList?.items" :key="video.id" class="videoItem">
                <div @click="chooseVideo=video;showVideo=true;">
                    <VideoInfo :vedio="video"></VideoInfo>
                </div>
            </div>
        </div>
    </div>

    <div v-else style="overflow-x: hidden;min-width: 1200px;">
        <VideoWithInfo :video="chooseVideo" @close-video="closeVideo()"></VideoWithInfo>
    </div>
</template>


<script setup lang="ts">
    import { ref,onMounted,defineProps,watch } from 'vue'
    import VideoInfo from "@/components/discover/videoInfo.vue"
    import VideoWithInfo from '@/components/video/videoWithInfo.vue'
    import Video from '../../types/video/Video'
    import VideoListParm from '../../types/video/VideoListParm'
    import Page from '../../base/page'
    import getVideoList from '@/utils/getVideoList'
    const isLoading=ref(false)
    const showVideo=ref(false)
    const chooseVideo=ref<Video>()
    const videoList=ref<Page<Video>>()
    const videoListParm=ref<VideoListParm>({
        pageNo:1,
        pageSize:5,
        type:""
    })

    const props=defineProps(['title'])

    watch(props,()=>{
        videoListParm.value.title=props.title
        tryGetVideoList()
    })

    const closeVideo=()=>{
        showVideo.value=false
    }


    const tryGetVideoList=async()=>{
        isLoading.value=true
        try{    
            videoListParm.value.title=props.title
            videoList.value=await getVideoList(videoListParm.value)
        }finally{
            isLoading.value=false
        }
    }


    onMounted(()=>{
        tryGetVideoList()
    })
</script>

<style scoped>
    .el-menu-item:not(.is-disabled):focus,.el-menu-item:not(.is-disabled):hover{
        background-color: transparent;
    }

    .el-menu-item{
        height: 40px;
        opacity: 0.5;
    }
    .el-menu-item.is-active , .el-menu-item:hover{
        color: aliceblue !important;
        font-weight: bolder;
        opacity: 1;
    }
    .videoList{
        margin-top:10px;
        height: 75vh;
        overflow: auto;
        scrollbar-width:none
    }

    .videoItem{
        margin-top:10px;
        float:left;
        margin-left:20px;
        cursor:pointer;
    }

    .videoView{
        height: 750px;
    }


</style>